import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import {
    Flex,
    Icon,
    ListView,
    SegmentedControl,
   } from 'antd-mobile';
import OrderItem from "./orderItem";
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import {orderLi} from "./orderList.less";

class OrderList extends Component {

    constructor(props) {
        super(props);
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.orderList = [];
        this.AlloyTouch=null;
        this.state = {
            orderEntities:[],
            selectedIndex: parseInt(this.props.match.params.data),
            pageNo: 1,
            dataSource: this.ds.cloneWithRows(this.orderList),
            hasMore: false,
            isLoading: false,
            isInit: true,
            dataLength: 0
        };
    }
    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;

    };
    refreshList = ({pageNo, selectedIndex}) => {
        let status = null;
        switch (selectedIndex) {
            case 0:
                status = 50;
                break;
            case 1:
                status = 10;
                break;
            case 2:
                status = 30;
                break;
            case 3:
                status = 80;
                break;
        }
        this.props.dispatch({type:"orderList/OrderListEFF",obj:{pageNo,status}}).then(result => {
            this.setState({
                isLoading: false
            });
            const {orderList=[]} =this.props.orderList;
                const data = orderList || [];
                console.log(this.props.orderList)
                const pageSize = this.props.orderList.pageSize;
                const dataLength = data.length;
                let hasMore = true;
                if (dataLength < pageSize) {
                    hasMore = false;
                }
                if (this.state.isInit) {
                    this.orderList = data;
                } else {
                    this.orderList = [...this.orderList, ...data];
                }
                this.setState({
                    hasMore,
                    pageNo,
                    dataSource: this.ds.cloneWithRows(this.orderList),
                    dataLength: data.length
                })

        })
    }
    componentDidMount(){
        this.refreshList({
            pageNo: 1,
            selectedIndex: this.state.selectedIndex
        });
    }

    refresh = () => {
        this.refreshList({
            pageNo: 1,
            selectedIndex: this.state.selectedIndex
        });
    }
    onEndReached = (event) => {
        if (this.state.isLoading || !this.state.hasMore) {
            return;
        }
        this.setState({
            isLoading: true,
            isInit: false
        });
        let pageNo = this.state.pageNo + 1;
        this.refreshList({
            pageNo,
            selectedIndex: this.state.selectedIndex,
        });
    }
    componentDidUpdate(prevProps, prevState) {
        // 当前url参数
        const type = parseInt(this.props.match.params.data);
        // 如果变化参数
        if (type != this.state.selectedIndex) {
            this.setState({
                pageNo: 1,
                selectedIndex: type,
                isInit: true
            })
            this.refreshList({
                pageNo: 1,
                selectedIndex: type
            });
        }
    }

    upDatePage = () => this.refreshList({pageNo: 1, selectedIndex: this.state.selectedIndex})

    render() {
        const {pageSize} =this.props.orderList;
        const {selectedIndex} = this.state;
        const footer = <div style={{padding: 30, textAlign: 'center'}}>
            {this.state.dataLength <= 0 ? <div className="mei"><span style={{position:"absolute",bottom:"0",left:"30%",fontSize:".3rem"}}>没有可查看的订单呦!</span></div> : this.state.isLoading ? '加载中...' : '加载完毕'}
        </div>;
        return (
            <Flex direction="column" style={{height:"100%", position: 'relative'}} className={orderLi}>
                <NavTopBar title="全部订单" isBlack={1} jumpUrl={`/my`} dispatch={this.props.dispatch} rightContent={[
                    <Icon key="0" type="search" onClick={ e => this.props.dispatch(routerRedux.push({pathname: "/filterOrder/0"})) }style={{ marginRight: '0.32rem' }} />,
                    <Icon key="1" type="xiaoxi" onClick={ e => this.props.dispatch(routerRedux.push({pathname: "/messagesCenter"})) }/>,
                ]}/>
                <SegmentedControl
                    className='orderlist-header'
                    onChange={(e) => {
                        this.props.dispatch(routerRedux.replace({
                            pathname:`/orderList/${e.nativeEvent.selectedSegmentIndex}`
                        }));
                        document.getElementsByClassName("am-list-view-scrollview")[0].scrollTo(0,0);
                    }}
                    selectedIndex={selectedIndex}
                    values={['全部订单', '待付款', '待收货', '待评价']}
                    style={{
                    height: '0.9rem',
                    width:"100%",
                    color:"#333",
                    backgroundColor:"#fff",
                    fontSize: '.24rem',
                }}/>

                <div className="wx-orderlist" style={{width: "100%", position: 'absolute', top: '1.9rem', bottom: '0rem'}}>
                        <ListView
                            style={{
                                // height: `${document.documentElement.clientHeight / 100 - 1.6}rem`,
                                // overflow: 'scroll',
                                height: '100%'
                            }}
                            pageSize={pageSize}
                            renderFooter={() => footer}
                            onEndReached={this.onEndReached}
                            onEndReachedThreshold={50}
                            dataSource={this.state.dataSource}
                            renderRow={(dataItem) => (
                                <OrderItem
                                    cancelOrder={this.refresh}
                                    finishorder={this.refresh}
                                    dataItem={dataItem}
                                    status={ this.upDatePage }>
                                </OrderItem>
                            )}/>
                </div>



            </Flex>
        );
    }
}


export default connect(({ orderList }) => ({ orderList }))(OrderList);
